import LaunchCountdown from "../Dial/Dial";
import shangsuo from "../../assets/image/img_shangsuo@2x.png";
import React from "react";
import styled, { ThemeContext } from 'styled-components';
import TokenSymbol from '../../components/TokenSymbol';
import config from "../../config";
import useBasisCash from "../../hooks/useBasisCash";
import moment from "moment";
import Countdown from "react-countdown";
import { commify } from 'ethers/lib/utils';

const StyledCardSuperAccent1 = styled.div`
  margin-top: 2px;
  border-radius: 0px 0px 20px 20px;
  padding: 10px 0px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

interface StarLockProps {
    baseNum?: number,
    enable?: boolean,
    startTime?: number,
}

const StarLock: React.FC<StarLockProps> = ({baseNum, enable, startTime}) => {
  const basisCash = useBasisCash();
  let color = '#ff0000';
  if (config.plane[config.group].sCASH) {
    if (baseNum >= config.plane[config.group].sCASH) {
      color = '#50d9b6';
    }
  } else if (config.plane[config.group].lp) {
    color = '#50d9b6';
    if (baseNum >= config.plane[config.group].lp) {
      color = '#50d9b6';
    }
  }
  const StyledCardSuperAccent = styled.div`
    background: ${color};
    border-radius: 12px;
    filter: blur(8px);
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
  `;

  const StyledCard = styled.div`
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid ${color};
    border-radius: 12px;
    box-shadow: inset 1px 1px 0px ${props => props.theme.color.grey[700]};
    display: block;
  `;

  const StyleTVLValue = styled.div`
    color: ${color};
    text-align: center;
    font-size: 18px;
    margin-top:5px;
    margin-bottom:5px;
  `;
  return (
    <div>
      {
        config.plane[config.group].lpPair != null && enable && startTime && moment().valueOf() >= startTime
        ?
        <></>
        :
        <StyledCards>
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: '15px' }}>
            <TokenSymbol symbol={'s' + config.group.toUpperCase()} />
            <CardHeader>{'s' + config.group.toUpperCase()}</CardHeader>
          </div>
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={
                enable ? 100 :
                baseNum ? baseNum / (config.plane[config.group].sCASH ? config.plane[config.group].sCASH : config.plane[config.group].lp) * 100 : 0}
            >
              {
                config.plane[config.group].lpPair != null && enable && moment().valueOf() < startTime ?
                <Countdown
                    date={moment(startTime).toDate()}
                ></Countdown>
                :
                <img
                  src={shangsuo}
                  alt={`LOCK`}
                  width={51}
                />
              }
            </LaunchCountdown>
            {
              config.plane[config.group].lpPair != null && !enable
              ?
              <React.Fragment><Totalp>{config.plane[config.group].lpPair}流动性达到{config.plane[config.group].lpLabel}$解锁</Totalp>
              <Totalbutton onClick={() => window.open(basisCash.getStakeLpUrl(config.plane[config.group].lpPair))}>质押 LP 解锁</Totalbutton></React.Fragment>
              :
              <></>
            }
            {
              config.plane[config.group].lpPair != null && enable
              ?
              <React.Fragment><Totalp>{config.plane[config.group].lpPair}流动性达到{config.plane[config.group].lpLabel}$解锁</Totalp>
              <Totalbutton>即将开始</Totalbutton></React.Fragment>
              :
              <></>
            }
            {
              config.plane[config.group].sCASH != null 
              ?
              <React.Fragment><Totalp>sCASH总量达到{commify(config.plane[config.group].sCASH)}解锁</Totalp>
              <Totalbutton onClick={() => window.open(basisCash.getBuyTokenUrl('HUSD/sCASH'))}>购买sCASH解锁</Totalbutton></React.Fragment>
              :
              <></>
            }
          </StyledCardSuperAccent1>
        </StyledCards>
      }
      <Center>
        <StyledCardWrapper>
          <StyledCardSuperAccent />
          <StyledCard>
            {
              config.plane[config.group].lpPair != null 
              ?
              <React.Fragment>
                <StyleTVL>{config.plane[config.group].lpContract} 锁仓总量</StyleTVL>
                <StyleTVLValue>{'$' + commify(baseNum)}</StyleTVLValue>
              </React.Fragment>
              :
              <React.Fragment>
                <StyleTVL>当前流通量</StyleTVL>
                <StyleTVLValue>{commify(baseNum)}</StyleTVLValue>
              </React.Fragment>
            }
          </StyledCard>
        </StyledCardWrapper>
      </Center>
    </div>
  )
}

const CardHeader = styled.span`
  font-size: 24px;
  font-family: FZPinShangHeiS-R-GB;
  color: #FFFFFF;
  margin-left: 12px;
`;

const StyledCards = styled.div`
  margin-top: 20px;
  width: 220px;
  min-height: 315px;
  padding: ${(props) => props.theme.spacing[3]}px 30px;
  color: ${(props) => props.theme.color.white};
  background-color: rgba(48, 55, 78, 0.6);
  @media (max-width: 768px) {
    width: 80%;
  }
`;

const Totalbutton = styled.button`
border: none;
width: 220px;
background: #FA4E32;
border-radius: 22px;
font-size: 16px;
font-family: Comfortaa;
color: #FFFFFF;
line-height: 38px;
`;

const Totalp = styled.p`
min-width: 250px;
text-align: center;
font-size: 13px;
font-family: FZPinShangHeiS-R-GB;
color: #7E7BAD;
`;

const StyledCardWrapper = styled.div`
  display: block;
  width: calc((900px - ${(props) => props.theme.spacing[4]}px * 2) / 3);
  position: relative;
  margin-top: 20px;
`;

const Center = styled.div`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 0px;
  width: 280px;
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const StyleTVL = styled.div`
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  margin-top:5px;
`;

export default StarLock;
